import React, { PureComponent } from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Card, Tabs, Button, Row, message, Spin } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import FooterToolbar from '@/components/FooterToolbar';
import TextOverFlow from '../../components/TextOverFlow';
import downloadFile, { formatNumber } from '@/utils/utils';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';

const { TabPane } = Tabs;
const { Description } = DescriptionList;
let uploadFiles = null;

@connect(({ pay, loading }) => ({
  pay,
  loading: loading.models.pay,
}))
class Detail extends PureComponent {
  state = {
    selectedRowKeys: [],
    selectedRows: [],
    allScroll: { x: 13000 },
    insAccuScroll: { x: 9000 },
    salaryScroll: { x: 4200 },
    titType: null, // 标题类型
    exportLoding: false,
  };

  componentDidMount() {
    this.getDetail();
    this.getDetailList();
    window.clearInterval(uploadFiles);
  }

  // 付费账单 - 账单详情
  getDetail = () => {
    const { dispatch, location } = this.props;
    const { billId } = location.query;
    dispatch({
      type: 'pay/fetchDetail',
      payload: {
        billId,
      },
    });
  };

  // 单个下载
  exportSingle = () => {
    const { location, dispatch } = this.props;
    const { billId } = location.query;
    const params = {
      billIdList: [billId],
    };
    this.setState({
      exportLoding: true,
    });
    // downloadFile({ billIdList: [billId] }, '/nsApi/nsBillPay/downSingleBillDet', 'POST');
    dispatch({
      type: 'pay/singleExport',
      payload: params,
    }).then(res => {
      if (res.success) {
        uploadFiles = setInterval(() => {
          dispatch({
            type: 'pay/uploadFile',
            payload: { billKey: res.data, downType: 1 },
          }).then(resFile => {
            if (resFile.success) {
              if (resFile.success && resFile.data && resFile.data.fileId && resFile.data.fileName) {
                downloadFile({ fileId: resFile.data.fileId, fileName: resFile.data.fileName });
                window.clearInterval(uploadFiles);
                this.setState({
                  exportLoding: false,
                });
              }
            } else {
              message.warning(resFile.message || '下载失败');
              window.clearInterval(uploadFiles);
              this.setState({
                exportLoding: false,
              });
            }
          });
        }, 2000);
      } else {
        this.setState({
          exportLoding: false,
        });
        window.clearInterval(uploadFiles);
        message.warning(res.message || '下载失败');
      }
    });
  };

  // 账单详情列表
  getDetailList = (currentPage = 1, pageSize = 10) => {
    const { dispatch, location } = this.props;
    const { billId } = location.query;
    const pageArg = {
      currentPage,
      pageSize,
    };
    dispatch({
      type: 'pay/fetchDetailList',
      payload: {
        billId,
        pageArg,
      },
    }).then(response => {
      if (response.success && response.data) {
        this.setState({
          titType: response.data.titType || 1, // 账单类型
        });
      }
    });
  };

  tabChange = e => {
    if (e === '1') {
      this.getDetail();
    } else {
      this.getDetailList();
    }
  };

  handleStandardTableChange = pagination => {
    this.getDetailList(pagination.current, pagination.pageSize);
  };

  render() {
    const {
      pay: { payBillDetail, detailList },
      loading,
    } = this.props;
    const {
      selectedRowKeys,
      selectedRows,
      titType,
      exportLoding,
      allScroll,
      insAccuScroll,
      salaryScroll,
    } = this.state;

    // 社保公积金，工资的表格账单
    const allColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '社保个人账号',
        dataIndex: 'insIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '公积金个人账号',
        dataIndex: 'accuIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['pensDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['pensDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['pensDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['pensDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['pensDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['pensDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['pensDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['pensDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['pensDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['pensDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['medDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['medDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['medDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['medDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['medDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['medDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['medDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['medDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['medDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['medDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['unempDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['unempDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['unempDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['unempDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['unempDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['unempDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['unempDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['unempDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['unempDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['unempDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '工伤保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['injDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['injDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['injDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['injDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['injDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['injDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['injDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['injDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['injDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['injDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['birthDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['birthDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['birthDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['birthDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['birthDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['birthDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['birthDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['birthDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['birthDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['birthDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '住房公积金',
        children: [
          {
            title: '执行地',
            dataIndex: ['accuDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['accuDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['accuDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['accuDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['accuDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['accuDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['accuDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['accuDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['accuDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '个人社保总计',
        dataIndex: 'perInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '单位社保总计',
        dataIndex: 'entpInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保缴纳合计',
        dataIndex: 'insPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '公积金缴纳合计',
        dataIndex: 'accuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保公积金缴纳合计',
        dataIndex: 'insAccuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '服务费',
        dataIndex: 'serFee',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '一次性费用',
        children: [
          {
            title: '总金额',
            dataIndex: ['onceFee', 'feeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人部分',
            dataIndex: ['onceFee', 'perAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业部分',
            dataIndex: ['onceFee', 'entpAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '服务费',
            dataIndex: ['onceFee', 'fee'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '一次性费用说明',
        dataIndex: ['onceFee', 'detail'],
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资',
        children: [
          {
            title: '工资金额',
            dataIndex: ['wageDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本期免税收入',
            dataIndex: ['wageDet', 'advAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '养老个人',
            dataIndex: ['wageDet', 'pensAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '医疗个人',
            dataIndex: ['wageDet', 'medAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '失业个人',
            dataIndex: ['wageDet', 'unempAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '公积金个人',
            dataIndex: ['wageDet', 'accuAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计子女教育支出',
            dataIndex: ['wageDet', 'acumChildEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计继续教育支出',
            dataIndex: ['wageDet', 'acumCntnuEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房贷款利息支出',
            dataIndex: ['wageDet', 'acumHousMortgPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房租金支出',
            dataIndex: ['wageDet', 'acumHousRentPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计赡养老人支出',
            dataIndex: ['wageDet', 'acumSuptElderPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业（职业）年金',
            dataIndex: ['wageDet', 'firmAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '商业健康保险',
            dataIndex: ['wageDet', 'comAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税延养老保险',
            dataIndex: ['wageDet', 'defrPenAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '其他抵扣',
            dataIndex: ['wageDet', 'otherDedu'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '准予扣除的捐赠额',
            dataIndex: ['wageDet', 'allowDdctblDon'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '减免税额',
            dataIndex: ['wageDet', 'ddctblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本月应缴税额',
            dataIndex: ['wageDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税后扣款',
            dataIndex: ['wageDet', 'aftAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(上月)',
            dataIndex: ['wageDet', 'agoRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '实发金额',
            dataIndex: ['wageDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(本月)',
            dataIndex: ['wageDet', 'nowRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '年终奖',
        children: [
          {
            title: '年终奖金额',
            dataIndex: ['yearEndDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖个人所得税',
            dataIndex: ['yearEndDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖实发金额',
            dataIndex: ['yearEndDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '离职补偿金',
        children: [
          {
            title: '离职补偿金金额',
            dataIndex: ['resignDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金个人所得税',
            dataIndex: ['resignDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金实发金额',
            dataIndex: ['resignDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '劳务报酬',
        children: [
          {
            title: '劳务报酬金额',
            dataIndex: ['remuneDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬个人所得税',
            dataIndex: ['remuneDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬实发金额',
            dataIndex: ['remuneDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '实发合计',
        dataIndex: 'wageRealAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个税合计',
        dataIndex: 'wageTaxblAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资应收合计',
        dataIndex: 'wageSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    // 社保公积金表格账单
    const insAccuColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '社保个人账号',
        dataIndex: 'insIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '公积金个人账号',
        dataIndex: 'accuIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['pensDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['pensDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['pensDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['pensDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['pensDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['pensDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['pensDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['pensDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['pensDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['pensDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['medDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['medDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['medDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['medDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['medDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['medDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['medDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['medDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['medDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['medDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['unempDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['unempDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['unempDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['unempDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['unempDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['unempDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['unempDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['unempDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['unempDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['unempDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '工伤保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['injDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['injDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['injDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['injDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['injDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['injDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['injDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['injDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['injDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['injDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人账号',
            dataIndex: ['birthDet', 'assIndvAccoNo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '执行地',
            dataIndex: ['birthDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['birthDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['birthDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['birthDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['birthDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['birthDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['birthDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['birthDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['birthDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '住房公积金',
        children: [
          {
            title: '执行地',
            dataIndex: ['accuDet', 'areaName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '支付方式',
            dataIndex: ['accuDet', 'pmWayName'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业基数',
            dataIndex: ['accuDet', 'entpBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: ['accuDet', 'perBase'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '总额',
            dataIndex: ['accuDet', 'realFeeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位比例（%）',
            dataIndex: ['accuDet', 'entpProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '单位金额',
            dataIndex: ['accuDet', 'entpPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例（%）',
            dataIndex: ['accuDet', 'perProp'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人金额',
            dataIndex: ['accuDet', 'perPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '个人社保总计',
        dataIndex: 'perInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '单位社保总计',
        dataIndex: 'entpInsSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保缴纳合计',
        dataIndex: 'insPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '公积金缴纳合计',
        dataIndex: 'accuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保公积金缴纳合计',
        dataIndex: 'insAccuPaySum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '服务费',
        dataIndex: 'serFee',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '一次性费用',
        children: [
          {
            title: '总金额',
            dataIndex: ['onceFee', 'feeAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人部分',
            dataIndex: ['onceFee', 'perAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业部分',
            dataIndex: ['onceFee', 'entpAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '服务费',
            dataIndex: ['onceFee', 'fee'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '一次性费用说明',
        dataIndex: ['onceFee', 'detail'],
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    // 工资表格账单
    const salaryColumns = [
      {
        title: '客户编号',
        dataIndex: 'custNo',
        onCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '100px' } }),
        fixed: 'left',
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        fixed: 'left',
      },
      {
        title: '缴费人员类别',
        dataIndex: 'insIdeName',
        onCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center', width: '180px' } }),
        render: val => val || '--',
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: text => {
          if (text) {
            return `${`${text}`.substring(0, 4)}-${`${text}`.substring(4)}`;
          }
          return null;
        },
      },
      {
        title: '工资',
        children: [
          {
            title: '工资金额',
            dataIndex: ['wageDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本期免税收入',
            dataIndex: ['wageDet', 'advAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '养老个人',
            dataIndex: ['wageDet', 'pensAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '医疗个人',
            dataIndex: ['wageDet', 'medAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '失业个人',
            dataIndex: ['wageDet', 'unempAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '公积金个人',
            dataIndex: ['wageDet', 'accuAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计子女教育支出',
            dataIndex: ['wageDet', 'acumChildEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计继续教育支出',
            dataIndex: ['wageDet', 'acumCntnuEduPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房贷款利息支出',
            dataIndex: ['wageDet', 'acumHousMortgPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计住房租金支出',
            dataIndex: ['wageDet', 'acumHousRentPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '累计赡养老人支出',
            dataIndex: ['wageDet', 'acumSuptElderPay'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业（职业）年金',
            dataIndex: ['wageDet', 'firmAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '商业健康保险',
            dataIndex: ['wageDet', 'comAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税延养老保险',
            dataIndex: ['wageDet', 'defrPenAnnui'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '其他抵扣',
            dataIndex: ['wageDet', 'otherDedu'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '准予扣除的捐赠额',
            dataIndex: ['wageDet', 'allowDdctblDon'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '减免税额',
            dataIndex: ['wageDet', 'ddctblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '本月应缴税额',
            dataIndex: ['wageDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '税后扣款',
            dataIndex: ['wageDet', 'aftAdjAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(上月)',
            dataIndex: ['wageDet', 'agoRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '实发金额',
            dataIndex: ['wageDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '补退税额(本月)',
            dataIndex: ['wageDet', 'nowRtnAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '年终奖',
        children: [
          {
            title: '年终奖金额',
            dataIndex: ['yearEndDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖个人所得税',
            dataIndex: ['yearEndDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '年终奖实发金额',
            dataIndex: ['yearEndDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '离职补偿金',
        children: [
          {
            title: '离职补偿金金额',
            dataIndex: ['resignDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金个人所得税',
            dataIndex: ['resignDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '离职补偿金实发金额',
            dataIndex: ['resignDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '劳务报酬',
        children: [
          {
            title: '劳务报酬金额',
            dataIndex: ['remuneDet', 'incmAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬个人所得税',
            dataIndex: ['remuneDet', 'taxblAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '劳务报酬实发金额',
            dataIndex: ['remuneDet', 'realAmo'],
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '实发合计',
        dataIndex: 'wageRealAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个税合计',
        dataIndex: 'wageTaxblAmo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '工资应收合计',
        dataIndex: 'wageSum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '合计',
        dataIndex: 'sum',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];

    const onColumns = parameter => {
      if (parameter === 1) {
        return allColumns;
      }
      if (parameter === 2) {
        return insAccuColumns;
      }
      return salaryColumns;
    };
    const onScroll = parameter => {
      if (parameter === 1) {
        return allScroll;
      }
      if (parameter === 2) {
        return insAccuScroll;
      }
      return salaryScroll;
    };

    return (
      <PageHeaderWrapper>
        <Spin spinning={exportLoding}>
          <Card className={styles.tabCard}>
            <Tabs defaultActiveKey="1">
              <TabPane tab="账单信息" key="1">
                <Card
                  title={
                    <span style={{ fontWeight: 'bolder' }} id="sendInfor">
                      基本信息
                    </span>
                  }
                  style={{ marginBottom: 24 }}
                  bordered={false}
                >
                  <DescriptionList>
                    <Description term="签约方">{payBillDetail.recvSuppName || '--'}</Description>
                    <Description term="账单年月">{payBillDetail.billYm || '--'}</Description>
                    <Description term="账单金额">
                      {payBillDetail.billAmo === 0
                        ? 0
                        : (payBillDetail.billAmo && formatNumber(payBillDetail.billAmo)) || '--'}
                    </Description>
                    <Description term="涉及人数">
                      {payBillDetail.involvePersonNum || '--'}
                    </Description>
                    <Description term="服务费">
                      {formatNumber(payBillDetail.othCost) || '--'}
                    </Description>
                    <Description term="代收社保">
                      {formatNumber(payBillDetail.agtsrvIns) || '--'}
                    </Description>
                    <Description term="代收公积金">
                      {formatNumber(payBillDetail.agtsrvAccu) || '--'}
                    </Description>
                    <Description term="代收工资">
                      {formatNumber(payBillDetail.agtsrvWage) || '--'}
                    </Description>
                    <Description term="个人所得税">
                      {formatNumber(payBillDetail.taxblAmo) || '--'}
                    </Description>
                    <Description term="账单状态">{payBillDetail.billStateName || '--'}</Description>
                    <Description term="确认支付人员">{payBillDetail.chrgName || '--'}</Description>
                    <Description term="确认支付时间">
                      {payBillDetail.chrgTime
                        ? moment(payBillDetail.chrgTime).format('YYYY-MM-DD HH:mm')
                        : '--'}
                    </Description>
                    <Description term="确认账单时间">
                      {payBillDetail.cfmTime
                        ? moment(payBillDetail.cfmTime).format('YYYY-MM-DD HH:mm')
                        : '--'}
                    </Description>
                  </DescriptionList>
                </Card>
                <FooterToolbar style={{ width: '100%' }}>
                  <Button onClick={() => router.goBack()}>返回</Button>
                </FooterToolbar>
              </TabPane>
              <TabPane tab="账单明细" key="2">
                <Row style={{ marginBottom: 16 }}>
                  <Authorized authority="ns:nsBillPay:downBill" noMatch={null}>
                    <Button
                      type="primary"
                      style={{ marginRight: 20 }}
                      icon={<DownloadOutlined />}
                      onClick={this.exportSingle}
                    >
                      下载
                    </Button>
                  </Authorized>
                </Row>
                <StandardTable
                  bordered
                  rowSelection={null}
                  selectedRows={selectedRows}
                  loading={loading}
                  selectedRowKeys={selectedRowKeys}
                  data={detailList}
                  rowKey="billDetId"
                  onSelectRow={this.handleSelectRows}
                  onChange={this.handleStandardTableChange}
                  scroll={onScroll(titType)}
                  columns={onColumns(titType)}
                />
              </TabPane>
            </Tabs>
          </Card>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Detail;
